<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="购物车"
            :hasBack="false"
        ></common-header>
        <!-- 共用头部组件 -->

        <div
            class="care-deit"
            v-html="editTips"
            @click="goEdit"
        ></div>

        <!-- 购物车温馨提示 -->
        <div class="cart-tips">
            温馨提示：商品免费，每件商品收取一定的平台服务费
        </div>
        <!-- 购物车温馨提示 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <!-- 购物车列表 -->
            <div
                class="cart-type-title"
                v-if="vipCartList.length>0"
            >白领商品</div>
            <div
                class="cart-item"
                v-for="(item,index) of vipCartList"
                :key="'vip'+item.cart_id"
            >
                <div class="cart-main">
                    <common-checkbox
                        @select="select"
                        :checked="item.checked"
                        selectType="vip"
                        :selectId="item.cart_id"
                        :selectNum="index"
                        :onSale="item.status"
                        :isEdit="isEdit"
                    ></common-checkbox>
                    <div
                        class="goods-img-box"
                        @click="goGoodsDetail(item.id)"
                    >
                        <div
                            class="off-sale-tips"
                            v-if="item.status == 0"
                        >已下架</div>
                        <img
                            class="goods-img"
                            :src="item.imgs[0].title_img"
                        />
                    </div>
                    <div class="goods-info-box">
                        <div class="goods-name">{{item.title}}</div>
                        <div class="goods-format">
                            <span v-if="item.attr_values">{{item.attr_values+'，'}}</span>
                            <span>{{item.cart_num+'件'}}</span>
                        </div>
                        <img
                            class="get-methods-name"
                            src="@/assets/images/goodsDetail/free-get-icon.png"
                        />
                        <div class="goods-price">零售价：￥{{item.price_market | currency}}</div>
                    </div>
                </div>
                <div
                    class="delete-box"
                    @click="deleteItem(item.cart_id,index)"
                >删除</div>
            </div>
            <div
                class="cart-type-title"
                v-if="memberCartList.length>0"
            >会员价商品</div>
            <div
                class="cart-item"
                v-for="(item,index) of memberCartList"
                :key="'member'+item.cart_id"
            >
                <div class="cart-main">
                    <common-checkbox
                        @select="select"
                        :checked="item.checked"
                        :selectId="item.cart_id"
                        selectType="member"
                        :selectNum="index"
                        :onSale="item.status"
                        :isEdit="isEdit"
                    ></common-checkbox>
                    <div
                        class="goods-img-box"
                        @click="goGoodsDetail(item.id)"
                    >
                        <div
                            class="off-sale-tips"
                            v-if="item.status == 0"
                        >已下架</div>
                        <img
                            class="goods-img"
                            :src="item.imgs[0].title_img"
                        />
                    </div>
                    <div class="goods-info-box">
                        <div class="goods-name">{{item.title}}</div>
                        <div class="goods-format">
                            <span v-if="item.attr_values">{{item.attr_values+'，'}}</span>
                            <span>{{item.cart_num+'件'}}</span>
                        </div>
                        <div class="goods-member-price">会员价：￥{{item.price_0 | currency}}</div>
                        <div class="goods-price">零售价：￥{{item.price_market | currency}}</div>
                    </div>
                </div>
                <div
                    class="delete-box"
                    @click="deleteItem(item.cart_id,index)"
                >删除</div>
            </div>
            <!-- 购物车列表 -->

        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <!-- 购物车结算栏 -->
        <div class="coupon-box">
            <div class="coupon-item">店主特享：<span>-￥{{vipPrice | currency}}</span></div>
            <div class="coupon-item">会员特享：<span>-￥{{memberPrice | currency}}</span></div>
        </div>
        <div class="balance-box">
            <div class="banlance-info-box">
                <common-checkbox
                    class="all-select"
                    @select="selectAll"
                    :checked="allChecked"
                ></common-checkbox>
                <span class="select-all-name">全选</span>
                <div class="banlance-info">
                    <div class="banlance-info-item all-price">合计：￥{{totalPrice | currency}}</div>
                    <div class="banlance-info-item">
                        <div class="service-price">服务费：<span>￥{{servicePrice | currency}}</span></div>
                        <div class="balance-price">实付款：￥{{actualPrice | currency}}</div>
                    </div>
                </div>
            </div>
            <div
                class="balance-btn"
                v-if="isEdit == false"
                @click="goBanlance"
            >结算</div>
            <div
                class="balance-btn"
                v-else
                @click="goDelete"
            >移除</div>
        </div>
        <!-- 购物车结算栏 -->

        <!-- 共用底部导航栏 -->
        <common-footer nowPage="3"></common-footer>
        <!-- 共用底部导航栏 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonFooter from '@/components/Footer'
import CommonScroll from '@/components/Scroll'
import CommonCheckbox from '@/components/Checkbox'
export default {
    name: 'Cart',
    components: {
        CommonHeader,
        CommonFooter,
        CommonScroll,
        CommonCheckbox
    },
    data() {
        return {
            scrollStyle: {
                top: '1.89rem',
                left: '0',
                right: '0',
                bottom: '3.67rem'
            },
            vipCartList: [],
            memberCartList: [],
            cartList: [],
            totalPrice: 0,
            servicePrice: 0,
            actualPrice: 0,
            vipPrice: 0,
            memberPrice: 0,
            allChecked: false,
            clientNum: {},
            isEdit: false,
            editTips: '编辑'
        }
    },
    mounted() {
        this.getCartList()
    },
    methods: {
        getCartList() {
            const that = this
            let postData1 = this.qs.stringify({
                price_type: 0
            })
            let postData2 = this.qs.stringify({
                price_type: 1
            })
            this.axios.post('/api/cart/list.json', postData2).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.vipCartList = data.data
                    this.cartList = this.cartList.concat(data.data)
                    this.calTotalPrice()
                    if (
                        this.cartList.findIndex(
                            target => target.checked == false
                        ) == -1 &&
                        this.cartList.length > 0
                    ) {
                        this.allChecked = true
                    } else {
                        this.allChecked = false
                    }
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
            this.axios.post('/api/cart/list.json', postData1).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.memberCartList = data.data
                    this.cartList = this.cartList.concat(data.data)
                    this.calTotalPrice()
                    if (
                        this.cartList.findIndex(
                            target => target.checked == false
                        ) == -1 &&
                        this.cartList.length > 0
                    ) {
                        this.allChecked = true
                    } else {
                        this.allChecked = false
                    }
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        goGoodsDetail(id) {
            this.$router.push({
                path: '/goodsDetail',
                query: {
                    goodsId: id,
                    goodsType: 0
                }
            })
        },
        select(data) {
            if (data.selectType == 'vip') {
                let postData = this.qs.stringify({
                    cart_id: data.selectId,
                    checked: data.checked
                })
                this.axios
                    .post('/api/cart/checked.json', postData)
                    .then(res => {
                        const data = res.data
                        if (data.status == 1) {
                        } else {
                            this.commonDialog.alert('提示', data.msg)
                        }
                    })
                this.vipCartList[data.selectNum].checked = data.checked
                this.$nextTick(() => {
                    if (
                        this.vipCartList.findIndex(
                            target => target.checked == false
                        ) == -1 &&
                        this.memberCartList.findIndex(
                            target => target.checked == false
                        ) == -1
                    ) {
                        this.allChecked = true
                    } else {
                        this.allChecked = false
                    }
                })
                this.calTotalPrice()
            } else {
                let postData = this.qs.stringify({
                    cart_id: data.selectId,
                    checked: data.checked
                })
                this.axios
                    .post('/api/cart/checked.json', postData)
                    .then(res => {
                        const data = res.data
                        if (data.status == 1) {
                        } else {
                            this.commonDialog.alert('提示', data.msg)
                        }
                    })
                this.memberCartList[data.selectNum].checked = data.checked
                this.$nextTick(() => {
                    if (
                        this.vipCartList.findIndex(
                            target => target.checked == false
                        ) == -1 &&
                        this.memberCartList.findIndex(
                            target => target.checked == false
                        ) == -1
                    ) {
                        this.allChecked = true
                    } else {
                        this.allChecked = false
                    }
                })
                this.calTotalPrice()
            }
        },
        selectAll(data) {
            this.allChecked = data.checked
            if (this.allChecked == true) {
                this.vipCartList.forEach(item => {
                    if (item.status == 0 && this.isEdit == false) {
                        return
                    } else {
                        item.checked = true
                        let postData = this.qs.stringify({
                            cart_id: item.cart_id,
                            checked: true
                        })
                        this.axios
                            .post('/api/cart/checked.json', postData)
                            .then(res => {
                                const data = res.data
                                if (data.status == 1) {
                                } else {
                                    this.commonDialog.alert('提示', data.msg)
                                }
                            })
                    }
                })
                this.memberCartList.forEach(item => {
                    if (item.status == 0 && this.isEdit == false) {
                        return
                    } else {
                        item.checked = true
                        let postData = this.qs.stringify({
                            cart_id: item.cart_id,
                            checked: true
                        })
                        this.axios
                            .post('/api/cart/checked.json', postData)
                            .then(res => {
                                const data = res.data
                                if (data.status == 1) {
                                } else {
                                    this.commonDialog.alert('提示', data.msg)
                                }
                            })
                    }
                })
            } else {
                this.vipCartList.forEach(item => {
                    item.checked = false
                    let postData = this.qs.stringify({
                        cart_id: item.cart_id,
                        checked: false
                    })
                    this.axios
                        .post('/api/cart/checked.json', postData)
                        .then(res => {
                            const data = res.data
                            if (data.status == 1) {
                            } else {
                                this.commonDialog.alert('提示', data.msg)
                            }
                        })
                })
                this.memberCartList.forEach(item => {
                    item.checked = false
                    let postData = this.qs.stringify({
                        cart_id: item.cart_id,
                        checked: false
                    })
                    this.axios
                        .post('/api/cart/checked.json', postData)
                        .then(res => {
                            const data = res.data
                            if (data.status == 1) {
                            } else {
                                this.commonDialog.alert('提示', data.msg)
                            }
                        })
                })
            }
            this.calTotalPrice()
        },
        calTotalPrice() {
            this.totalPrice = 0
            this.servicePrice = 0
            this.actualPrice = 0
            this.vipPrice = 0
            this.memberPrice = 0
            this.vipCartList.forEach(item => {
                if (item.checked == true) {
                    this.totalPrice += parseInt(
                        item.price_market * item.cart_num
                    )
                    this.vipPrice += parseInt(item.price_market * item.cart_num)
                    this.servicePrice += parseInt(item.price_1 * item.cart_num)
                    this.actualPrice += parseInt(item.price_1 * item.cart_num)
                }
            })
            this.memberCartList.forEach(item => {
                if (item.checked == true) {
                    this.totalPrice += parseInt(
                        item.price_market * item.cart_num
                    )
                    this.memberPrice += parseInt(
                        (item.price_market - item.price_0) * item.cart_num
                    )
                    this.actualPrice += parseInt(item.price_0 * item.cart_num)
                }
            })
        },
        goBanlance() {
            const cart_ids = []
            const cart_goods = []
            this.vipCartList.forEach(item => {
                if (item.checked == true) {
                    cart_ids.push(item.cart_id)
                    cart_goods.push(item)
                }
            })
            this.memberCartList.forEach(item => {
                if (item.checked == true) {
                    cart_ids.push(item.cart_id)
                    cart_goods.push(item)
                }
            })
            if (cart_ids == '' || cart_goods == '') {
                return
            } else {
                let postData = this.qs.stringify({
                    cart_ids: cart_ids
                })
                this.axios.post('/api/cart/apply.json', postData).then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        sessionStorage.setItem(
                            'cart_ids',
                            JSON.stringify(cart_ids)
                        )
                        sessionStorage.setItem(
                            'cart_goods',
                            JSON.stringify(cart_goods)
                        )
                        sessionStorage.setItem(
                            'cart_price',
                            JSON.stringify(this.actualPrice)
                        )
                        sessionStorage.setItem(
                            'cart_vipCoupon',
                            JSON.stringify(this.vipPrice)
                        )
                        sessionStorage.setItem(
                            'cart_memberCoupon',
                            JSON.stringify(this.memberPrice)
                        )
                        sessionStorage.setItem(
                            'cart_servicePrice',
                            JSON.stringify(this.servicePrice)
                        )
                        this.$router.push('/orderConfirm')
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
            }
        },
        goEdit() {
            if (this.isEdit) {
                this.isEdit = false
                this.editTips = '编辑'
            } else {
                this.isEdit = true
                this.editTips = '完成'
            }
        },
        goDelete() {
            let deleteItems = []
            for (
                let i = 0, flag = true, len = this.vipCartList.length;
                i < len;
                flag ? i++ : i
            ) {
                if (
                    this.vipCartList[i] &&
                    this.vipCartList[i].checked == true
                ) {
                    deleteItems.push(this.vipCartList[i].cart_id)
                    this.vipCartList.splice(i, 1)
                    flag = false
                } else {
                    flag = true
                }
            }
            for (
                let i = 0, flag = true, len = this.memberCartList.length;
                i < len;
                flag ? i++ : i
            ) {
                if (
                    this.memberCartList[i] &&
                    this.memberCartList[i].checked == true
                ) {
                    deleteItems.push(this.memberCartList[i].cart_id)
                    this.memberCartList.splice(i, 1)
                    flag = false
                } else {
                    flag = true
                }
            }
            if (this.vipCartList.length > 0 || this.memberCartList > 0) {
                if (
                    this.vipCartList.findIndex(
                        target => target.checked == false
                    ) == -1 &&
                    this.memberCartList.findIndex(
                        target => target.checked == false
                    ) == -1
                ) {
                    this.allChecked = true
                } else {
                    this.allChecked = false
                }
            } else {
                this.allChecked = false
            }
            let postData = this.qs.stringify({
                cart_id: deleteItems
            })
            this.axios.post('/api/cart/remove.json', postData)
        }
    },
    filters: {
        currency(value) {
            return parseFloat(value / 100).toFixed(2)
        }
    }
}
</script>

<style lang="stylus" scoped>
.care-deit
    position absolute
    top 0
    right 0
    width 1.11rem
    line-height 1.11rem
    text-align center
    font-size 0.37rem
    color #666
.cart-tips
    height 0.78rem
    line-height 0.78rem
    text-align center
    background #ffbab8
    font-size 0.33rem
    color #fff
.cart-empty-tips
    height 2rem
    line-height 2rem
    text-align center
    font-size 0.33rem
    color #999
.cart-type-title
    line-height 1rem
    text-align center
    font-size 0.38rem
    color #666
.cart-item
    position relative
    width 100%
    height 2.72rem
    background #fff
    margin-bottom 0.18rem
    .cart-main
        position absolute
        top 0
        left 0
        right 0
        bottom 0
        display flex
        align-items center
        width 100%
        height 2.72rem
        padding 0 0.46rem
        z-index 2
        box-sizing border-box
        background #fff
        transition all 0.3s
        .goods-img-box
            position relative
            width 1.67rem
            height 1.67rem
            overflow hidden
            margin-left 0.22rem
            .off-sale-tips
                position absolute
                top 0
                left 0
                right 0
                bottom 0
                line-height 1.67rem
                text-align center
                font-size 0.37rem
                color #fff
                background-color rgba(0, 0, 0, 0.5)
            .goods-img
                width 100%
                height 100%
        .goods-info-box
            position relative
            flex 1
            min-width 1px
            margin-left 0.27rem
            pointer-events none
            .goods-name
                line-height 1.3
                font-size 0.38rem
                color #333
                overflow hidden
                white-space nowrap
                text-overflow ellipsis
            .goods-format
                margin-top 0.18rem
                font-size 0.32rem
                color #888
                line-height 1.3
                overflow hidden
                white-space nowrap
                text-overflow ellipsis
            .goods-detail
                font-size 0.29rem
                color #666
                overflow hidden
                white-space nowrap
                text-overflow ellipsis
                margin-top 0.18rem
            .goods-other-box
                display flex
                align-items center
                margin-top 0.37rem
            .goods-member-price
                margin-top 0.18rem
                font-size 0.32rem
                color #d7463c
            .goods-price
                margin-top 0.18rem
                font-size 0.32rem
                color #999
            .get-methods-name
                margin-top 0.18rem
                height 0.6rem
    .move
        transform translateX(-1.57rem)
    .delete-box
        position absolute
        top 0
        right 0
        width 1.57rem
        height 2.72rem
        line-height 2.72rem
        text-align center
        background #d7463c
        font-size 0.38rem
        color #fff
.coupon-box
    position absolute
    bottom 2.74rem
    left 0
    right 0
    display flex
    align-items center
    justify-content space-between
    height 0.93rem
    padding 0 1.06rem
    background #fff
    .coupon-item
        font-size 0.32rem
        color #888
        line-height 1
        span
            font-size 0.32rem
            color #131313
.balance-box
    position absolute
    bottom 1.17rem
    left 0
    right 0
    height 1.57rem
    background #fff
    display flex
    box-sizing border-box
    .banlance-info-box
        display flex
        align-items center
        flex 1
        border-top 1px solid #eee
        border-bottom 1px solid #eee
        .all-select
            margin-left 0.46rem
        .select-all-name
            margin-left 0.18rem
            font-size 0.37rem
            color #131313
        .banlance-info
            flex 1
            padding 0 0.37rem
            .banlance-info-item
                display flex
                justify-content flex-end
                .service-price
                    font-size 0.32rem
                    color #888
                    span
                        color #131313
                .balance-price
                    font-size 0.32rem
                    color #d7463c
                    margin-left 0.27rem
            .all-price
                font-size 0.37rem
                color #131313
                margin-bottom 0.24rem
    .balance-btn
        width 1.93rem
        height 1.57rem
        line-height 1.57rem
        text-align center
        font-size 0.37rem
        color #fff
        background #4b866e
</style>

